<template>
	<view class="content"> 
		<view class="head_nav" :style="{height: 'calc(352rpx + '+ allBarHeight+'rpx)',background: 'url('+ bgurl +'/policy/user_img/my_bg1.png) no-repeat'}" >
			<!-- <image style="width: 100%;position: absolute; z-index: 1;" src="@/static/picture/indexbg.png" mode="widthFix" lazy-load></image> -->
			<!-- #ifdef MP-WEIXIN -->
			<view :style="{height: `${statusBarHeight}rpx`}"></view>
			<!-- #endif -->  
			<!-- <view class="fx-row-end-c mr32"  :style="{height: `${titleBarHeight}px`}" style="position: relative;z-index: 2;" @click="goSet">
				<image class="set_img" src="@/static/picture/set.png" mode="widthFix"></image>
			</view> -->
			<view :style="{height: `${titleBarHeight}rpx`}"></view>
			<view class="users fx-row-start-c" >
				<view class="user_img">
					<image v-if="userinfo.avatar!=null && userinfo.avatar" :src="userinfo.avatar" mode="aspectFill" lazy-load></image>
					<image v-else src="@/static/userimg.jpg"  mode="aspectFill" lazy-load></image>
				</view>
				<span class="username text-beyond" v-if="userinfo.name">{{userinfo.name}}</span>
				<span class="username text-beyond" v-else @click="goLogin">登录/注册</span>
			</view>
			<view class="user_label fx-row-sa-c"> 
				<view class="labels" @click.tap="gocollect">   
					<view>{{userinfo.collectionCount}}</view>
					<view class="ft26">收藏</view>
				</view> 
				<span style="width: 1rpx;height:31rpx;background: #fff;"></span>
				<view class="labels" @click.tap="goaddress">
					<view>{{userinfo.addressCount}}</view>
					<view class="ft26">地址管理</view>
				</view> 
				<span style="width: 1rpx;height:31rpx;background: #fff;"></span>
				<view class="labels" @click.tap="gocoupon">
					<view>{{userinfo.couponCount}}</view>
					<view class="ft26">优惠券</view>
				</view>
			</view> 
		</view>
		<view class="fx-row-start-c menu">
			<view class="menu_item" @click="gowallet">
				<image src="@/static/picture/menu10.png" lazy-load></image>
				<view>SPA钱包</view> 
				<view class="badge" v-if="istoken&&userinfo.couponNumber!=0">{{userinfo.couponNumber?userinfo.couponNumber:'0'}}</view>
			</view>
			<view class="menu_item" @click="gowriteoff">
				<image src="@/static/picture/menu9.png" lazy-load></image>
				<view>团购核销</view>
			</view>
			<view class="menu_item" @click="goabout">
				<image src="@/static/picture/menu1.png" lazy-load></image>
				<view>关于我们</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="menu_item" @click="callphone" >
				<image src="@/static/picture/menu7.png" lazy-load></image>
				<view>联系客服</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<a  class="menu_item" :href='phones' >
				<image src="@/static/picture/menu7.png" lazy-load></image>
				<view>联系客服</view>
			</a>
			<!-- #endif -->  
			<view class="menu_item" @click="getMenduItem(1)">
				<image   src="@/static/picture/menu8.png"  lazy-load></image>
				<view>意见反馈</view>
			</view>
			<view class="menu_item" @click="getMenduItem(2)">
				<image   src="@/static/picture/menu6.png"  lazy-load></image>
				<view>投诉举报</view>
			</view>
			<view class="menu_item" @click="privacy">  
				<image src="@/static/picture/menu5.png"  lazy-load></image>
				<view>隐私协议</view>
			</view> 
			<view class="menu_item" @click="userxy">
				<image   src="@/static/picture/menu3.png"  lazy-load></image>
				<view>用户协议</view>
			</view>  
			<view class="menu_item" @click="goSet" >
				<image src="@/static/picture/menu4.png"  lazy-load></image>
				<view>设置</view>
			</view>
		</view>  
		<view class="select" v-if="userinfo.id!=null">
			<view class="select_btn" @click="outLogin">退出登录</view>
		</view>
	</view>
</template>

<script>
	import {  geturl,getUser,isToken} from '@/utils/api.js'
	import badgeMix from '@/common/mixins.js'
	import config from '@/config.js' 
	import {  mapActions } from 'vuex'
	export default {
		mixins: [badgeMix],
		data() {
			return {
				titleBarHeight:this.titleBarHeight * 2,
				statusBarHeight:this.statusBarHeight * 2,
				allBarHeight:this.allBarHeight * 2, 
				phone:'',
				phones:'',
				userinfo:{},
				istoken:'',
				bgurl:config.imageUrl,
			}
		},
		computed: { 
			
		},
		async onShow() {
			this.istoken = uni.getStorageSync('TOKEN');
			await getUser().then((res) => {
				console.log(res,"用户信息");  
				if(res.code == '200'){
					var users = res.result 
					this.userinfo = users
					uni.setStorageSync('USERINFO', users)
					this.$store.commit('SET_USERINFO', users) 
				}
			}) 
			
		},
		async onLoad() {    
			
			// await this.menuButton() 
			this.phones = 'tel:' + config.appInfo.phones
			// #ifdef H5
			await this.$u.init()
			await this.$u.share()
			// #endif 
			if(!uni.getStorageSync('OPENID') || uni.getStorageSync('OPENID').type == 'undefined'){
				// await this.$u.wxOauth()   
			} 
			await this.verifyTokens().then((res)=>{
				if(res == 401){
					this.istoken = ''
				}
			}) 
			
		},
		methods: { 
			...mapActions(['getUser','Logout']),   
			// 拨打电话
			callphone:function(){
				uni.makePhoneCall({
				    phoneNumber: config.appInfo.phones //仅为示例
				});
			},
			/**
			  * @Description:根据选项跳转指定页面
			  * @author: 赵瑞峰
			  * @param {1意见反馈 2投诉建议}
			  * @createTime: 2024-01-12 11:59:52
			  */
			getMenduItem(type){
				this.verifyToken().then((res)=>{
					if(res == 200){
						switch(type){
							case 1:
							uni.navigateTo({
								url:"/pages/feedback/feedback"
							})
							break;
							case 2:
							uni.navigateTo({
								url:"/pages/feedback/complaintBack/complaintBack"
							})
							break;
						}
					}
				})  
			},
			async goSet(){  
				this.verifyToken().then((res)=>{
					if(res == 200){
						uni.navigateTo({
							url:'/pages/user/set'
						})
					}
				})  				
			},
			async goaddress(){
				this.verifyToken().then((res)=>{
					if(res == 200){
						uni.navigateTo({
							url:'/pages/user/address'
						})
					}
				})   
			},
			async gocollect(){
				this.verifyToken().then((res)=>{
					if(res == 200){
						uni.navigateTo({
							url:'/pages/user/collect'
						})
					}
				})  			
			}, 
			async gocoupon(){
				this.verifyToken().then((res)=>{
					if(res == 200){
						uni.navigateTo({
							url:'/pages/user/coupon'
						})
					}
				})  			
			}, 
			async gowallet(){
				this.verifyToken().then((res)=>{
					if(res == 200){
						uni.navigateTo({
							url:'/pages/user/spaWallet'
						})
					}
				})  			
			},  
			async gowriteoff(){
				this.verifyToken().then((res)=>{
					if(res == 200){ 
						// #ifdef H5
						window.location.href = `${process.env.UNI_BASE_URL}/user/pages/user/groupWriteoff`;
						// #endif
						// #ifndef H5
						uni.navigateTo({
							url:'/pages/user/groupWriteoff'
						}) 
						// #endif
					}
				})  			
			},  
			goabout(){
				uni.navigateTo({
					url:'/pages/webview/about'
				})
			}, 
			// 退出登录
			outLogin(){ 
				this.istoken = ''
				this.Logout()
			},
			// 去登录
			goLogin(){
				uni.navigateTo({
					url:'/pages/login/index'
				})
			},
			// 用户协议
			userxy(){  
				const info = config.appInfo.agreements[1]
				uni.navigateTo({
					url:'/pages/webview/content?info='+ encodeURIComponent(JSON.stringify(info))
				}) 
			}, 
			// 隐私政策
			privacy(){ 
				const info = config.appInfo.agreements[0]
				uni.navigateTo({
					url:'/pages/webview/content?info='+ encodeURIComponent(JSON.stringify(info))
				}) 
			},
		}
	}
</script>

<style  lang="scss">
	page{
		background-color:$uni-main-page ;
	}
	.head_nav{
		position: relative;
		width: 750rpx;	   
		overflow: hidden;
		background-size: 100% auto !important;
		box-sizing: border-box; 
		// padding-bottom: var(--window-bottom);
		.set_img{
			width: 42rpx;
			/*  #ifdef  MP-WEIXIN */
			margin-right: 200rpx;
			/*  #endif  */ 
		}
		.users{
			position: relative;
			width:694rpx;
			margin: 12rpx 28rpx;
			z-index: 1;
			.user_img{
				width: 124rpx;
				height: 124rpx;
				margin-right: 26rpx;
				border-radius: 50%;
				overflow: hidden;
				border: 4rpx solid #fff;
				background-color: #fff;
				image{
					width: 124rpx;
					height: 124rpx;
				}
			}
			.username{
				width: 300rpx;
				font-size: 36rpx; 
				color: #FFFFFF; 
			}
		}
		.user_label{
			position: relative;
			width: 694rpx;
			margin: 0 28rpx;
			margin-top: 42rpx;
			color: #fff;
			z-index: 1;
			.labels{
				width: 49%;
				text-align: center;
				line-height: 50rpx;
				font-size: 36rpx;
			}
		}
	}
	.menu{
		position: relative;
		flex-wrap: wrap;
		width: 694rpx;
		padding: 26rpx 28rpx;
		margin-top: -20rpx ;
		background-color: #fff;
		border-radius: 20rpx;
		z-index: 1;
		.menu_item{
			position: relative;
			width: 25%;
			margin: 24rpx 0;
			text-align: center;
			font-size: 24rpx;
		 text-decoration: none;
		 color: #000;
		 .badge{
			 position: absolute;
			 top: -8rpx;
			 left: 100rpx;
			 height: 30rpx;
			 padding: 0 8rpx;
			 background-color: rgba(255, 90, 68, 1);
			 border-radius: 34rpx;
			 border: 3rpx solid #fff;
			 font-size: 24rpx;
			 color: #fff;
			 text-align: center;
			 line-height: 30rpx;
		 }
			image{
				width: 50rpx !important;
				height: 50rpx !important;
				margin-bottom: 12rpx;
			}
		}
	}
	.select{
		position: fixed;
		/*  #ifdef  MP-WEIXIN */
		bottom: calc(52rpx + env(safe-area-inset-bottom));
		/*  #endif  */ 
		/*  #ifdef  H5 */
		bottom: calc(152rpx + env(safe-area-inset-bottom));
		/*  #endif  */   
		width: 478rpx;
		height: 88rpx;
		margin: 0 136rpx ; 
		z-index: inherit;
		.select_btn{
			width: 478rpx;
			height: 88rpx;
			margin: 0 auto;
			border-radius: 50rpx;
			background: $uni-main;
			font-size: 36rpx;
			text-align: center; 
			color: #fff;
			line-height: 88rpx;
		}
	}
</style>
